<template>
    <!-- <detail-dialog ref="refDetailDialog"> -->
    <dialog-info ref="refDetailDialog">
        <!-- 标题 -->
        <template #DialogTitle>
            <span>投诉信息</span>
        </template>

        <!-- 内容 -->
        <template #DialogContainer>
            <div class="container">
                <el-table :data="tableData" stripe height="65vh" v-loading="loading">
                    <el-table-column type="index" width="50" label="#" align="center" />
                    <el-table-column prop="csId" width="220" label="投诉ID" />
                    <el-table-column prop="district" width="120" label="区县" />
                    <el-table-column prop="category" label="投诉类别" width="180" />
                    <el-table-column prop="subCategory" label="投诉子类别" width="auto" />
                    <!-- <el-table-column prop="gridName" label="网格名称" width="180" />
                    <el-table-column prop="operatingState" label="操作状态" width="200" /> -->
                    <el-table-column prop="gridName" label="网格名称" width="180">
                        <template #default="scope">
                            <span>{{ scope.row.gridName ? scope.row.gridName : '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operatingState" label="操作状态" width="200">
                        <template #default="scope">
                            <span>{{ scope.row.operatingState ? scope.row.operatingState : '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="分发时间" width="220">
                        <template #default="scope">
                            {{ getFormulateDate(scope.row.dispatchTime) }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </template>
    </dialog-info>
</template>

<script setup>
import { ref } from 'vue'
// import DetailDialog from "@/components/OpenlayerBaseMap/components/DetailDialog.vue";
// api相关 - 工具
import { apiCommon, getFormulateDate } from "@/utils/index.js";
import * as complainApi from "@/api/complain/complain";

const refDetailDialog = ref(null);
const tableData = ref([]);

let loading = ref(true)

/**
 * 业务
 */
const show = (val) => {
    tableData.value = []

    refDetailDialog.value.show();
    // console.log(val)

    setComplainDetailData(val);
};

const setComplainDetailData = async (circleData) => {
    // 获取接口数据接口
    let params = {
        ids: circleData.complaintIdListStr,
    };
    // console.log(params)

    let complainDetailData = await apiCommon(complainApi.queryComplaintListbyIds, params);
    tableData.value = complainDetailData.data;
    /* tableData.value.forEach(item => {
        for (let jItem in item) {
            if (item[jItem] === null) {
                item[jItem] = '-'
            }
        }
    }); */

    loading.value = false
}

defineExpose({
    show,
});

</script>